import React, { useState } from 'react';
import { Button, Toast } from 'antd-mobile';
import { sendMessageToAI } from '../api/ai';

const TestAPI: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState('');

  const testAPI = async () => {
    setLoading(true);
    setResult('');

    try {
      console.log('开始测试 API...');
      const response = await sendMessageToAI('你好，请简单介绍一下自己');
      setResult(response);
      Toast.show('API 测试成功！');
    } catch (error) {
      console.error('API 测试失败:', error);
      setResult(`错误: ${error.message}`);
      Toast.show('API 测试失败');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>API 连接测试</h2>
      <Button
        onClick={testAPI}
        loading={loading}
        color="primary"
        style={{ marginBottom: '20px' }}
      >
        {loading ? '测试中...' : '测试 API 连接'}
      </Button>

      {result && (
        <div style={{
          padding: '10px',
          backgroundColor: '#f5f5f5',
          borderRadius: '8px',
          whiteSpace: 'pre-wrap'
        }}>
          <strong>测试结果:</strong><br />
          {result}
        </div>
      )}
    </div>
  );
};

export default TestAPI;
